今天要來做的功能是,按下指定鍵盤按鍵,就會輸出彩蛋。
而我們設置的彩蛋按鈕是,上上下下左右左右BABA。
成果如下圖:
首先,我們先創建彩蛋的code,也就是指定要按下按鍵,要得知按鍵的keyCode的話,我們必須先在window下新增一個keyup事件,這樣就可獲取對應按鍵的keyCode,並且設置一個空陣列來放置我們按下的按鍵。
// 設置一個彩蛋code
const secretCode = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65];
// 空陣列
const input = [];
而我們利用push將按下的按鍵keyCode給push進去,然後再利用join去將陣列拼接成字串,再進行比對,如果input的keyCode = 彩蛋的keyCode,那就呼叫外部的Js產生獨角獸。
// 給予視窗增添鍵盤事件
window.addEventListener('keyup', (e) => {
console.log(e.keyCode);
input.push(e.keyCode);
if (input.join('') === secretCode.join('')) {
console.log("Ding Ding");
cornify_add();
}
當我們成功進去一次,就無法再次成功了,因為陣列的資料會不斷增加以致比對失敗,所以我們要在每次超過長度後移除元素,來保持兩個陣列的數量相同,此處利用shift
,當超過時,就移除第一個元素
,並且我們新添加的元素會在最後一位。
// if (input.length > secretCode.length) {
// input.shift();
// console.log(input);
// }
而原作者是利用splice去切掉多餘的元素。splice(起始位置,數量) 而負的就視為0
,所以到input內的資料數量到10之前都不會有動作,直到超過10(11-10=1),而我們起始位置-11的部分,也能以0代替。
input.splice(-secretCode.length - 1, input.length - secretCode.length);